<%--
  Created by IntelliJ IDEA.
  User: Ken
  Date: 2022/5/6
  Time: 10:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>游戏房间页面</title>
    <style>
        body {
            background-color: bisque;
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
            display: flex;
            flex-direction: row;
        }

        .left_div {
            height: 100%;
            width: 20%;
            border-right: 1px solid black;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .middle_div {
            height: 100%;
            width: 60%;
        }

        .right_div {
            height: 100%;
            width: 20%;
            border-left: 1px solid black;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        img {
            border-radius: 50%;
        }

        .left_div span {
            margin-top: 20px;
        }

        .right_div span {
            margin-top: 20px;
        }

        span {
            font-family: "楷体";
            font-size: 30px;
        }

        .right_info {
            display: none;
        }

        .title_div {
            height: 10%;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }

        .game_div {
            height: 70%;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .im_div {
            height: 20%;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .borad_div {
            background-color: #aaaaaa;
            width: 500px;
            height: 500px;
        }

        .im_info {
            width: 70%;
            height: 90%;
            border: 1px solid black;
            background-color: white;
            border-radius: 10px;
            box-shadow: 10px 10px 10px gray;
        }
        .im_btn {
            width: 20%;
            height: 90%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .im_btn input {
            box-shadow: 10px 10px 10px gray;
            border: 0px;
            padding: 5px;
        }

        .im_btn button {
            width: 80%;
        }
    </style>

    <script src="js/jquery.min.js"></script>
    <script src="js/gobang.js"></script>
    <script src="js/audio.js"></script>
    <script>

        //游戏是否开始
        var isbegin = false;
        //是否轮到我落子
        var isMe = false;
        //我方的棋子的颜色 0-黑色 1-白色
        var color;

        $(function(){
            //初始化websocket
            initWs();

            //初始化五子棋盘
            initGobang();

            //初始化音频
            initAudio();
        });

        //全局的websocket对象
        var ws;
        //初始化websocket
        function initWs(){
            if (window.WebSocket) {
                //支持WebSocket
                //连接WebSocket的服务端
                ws = new WebSocket("ws://10.36.155.91:8080/gogame");
                //设置一些回调方法
                ws.onopen = onOpen;
                ws.onclose = onClose;
                ws.onerror = onError;
                ws.onmessage = onMessage;
            } else {
                //浏览器不支持WebSocket
                alert("骚瑞，请选个浏览器！");
            }
        }

        //连接后触发
        function onOpen(){
            showInfoDiv("[系统]:服务器连接成功...");

            //加入房间
            //通过websocket发送消息 - js对象 -> json字符串 -> websocket发送
            var msg = {
                type: 100,
                rid: ${param.rid},
                pid: ${login_user.id},
                header: "${login_user.header}",
                nickname: "${login_user.nickname}",
                level: ${login_user.level},
                looks: ${param.looks}
            };
            //将该消息发送给WebSocket服务器
            sendWsMsg(msg);
        }

        //连接断开后触发
        function onClose(){
            showInfoDiv("[系统]:服务器断开连接...");
        }

        //连接异常时触发
        function onError(e){

        }

        //服务器发送消息后触发
        function onMessage(msg){
            //msg -> json -> js对象
            var msgObj = JSON.parse(msg.data);
            var type = msgObj.type;

            //判断type类型
            switch (type) {
                case 200:
                    //房间不存在
                    alert("房间不存在！");
                    break;
                case 203:
                    //不能加入房间
                    alert("人数已满，不能加入！");
                    break;
                case 201:
                    //加入房间成功
                    //获取房间信息
                    var rid = msgObj.rid;
                    var title = msgObj.title;
                    var looks = msgObj.looks;

                    //设置到页面上显示
                    $("#rid").html(rid);
                    $("#title").html(title);
                    $("#looks").html(looks);

                    showInfoDiv("[系统]:加入房间" + rid + "成功...");
                    break;
                case 202:
                    //有对手玩家加入房间，游戏开始
                    var pid = msgObj.pid;
                    var header = msgObj.header;
                    var nickname = msgObj.nickname;
                    var level = msgObj.level;
                    var firststep = msgObj.firststep;

                    //将对手信息放入右边的div
                    $(".right_div img").attr("src", "fileServlet?method=showImg&imgName=" + header);
                    $("#other_nickname").html(nickname);
                    $("#other_level").html("等级：" + level);

                    $(".right_info").show();
                    $(".right_wait_info").hide();

                    //修改游戏开始标志位
                    isbegin = true;
                    //设置先手位
                    showStepFlag(firststep);
                    //设置颜色
                    color = firststep ? 0 : 1;

                    showInfoDiv("[系统]:玩家" + nickname + "加入房间，对局开始...");
                    break;
                case 204:
                    //对方的落子信息
                    var x = msgObj.x;
                    var y = msgObj.y;
                    var ocolor = msgObj.color;
                    var isWin = msgObj.isWin;

                    //绘制对手的落子
                    drawGo(x,y,ocolor);
                    //轮到我方落子
                    showStepFlag(true);

                    //判断输赢
                    if(isWin == 2){
                        //结束游戏
                        isbegin = false;
                        //对方胜利
                        showInfoDiv("[系统]:我方失败！");
                    }
                    break;
                case 205:
                    //落子成功
                    var x = msgObj.x;
                    var y = msgObj.y;
                    var ocolor = msgObj.color;
                    var isWin = msgObj.isWin;

                    //可以落子
                    drawGo(x, y, ocolor);
                    //改变落子的方向
                    showStepFlag(false);

                    //判断属性
                    if(isWin == 1){
                        //结束游戏
                        isbegin = false;
                        //对方胜利
                        showInfoDiv("[系统]:我方胜利！");
                    }
                    break;
                case 206:
                    //获取最新的观战人数
                    var num = msgObj.looksNum;

                    //更新观战人数
                    $("#looks").html(num);
                    break;
                case 207:
                    //获取到玩家1的信息
                    var pid = msgObj.pid;
                    var header = msgObj.header;
                    var nickname = msgObj.nickname;
                    var level = msgObj.level;

                    $("#left_img").attr("src", "fileServlet?method=showImg&imgName=" + header);
                    $("#left_nickname").html(nickname);
                    $("#left_level").html(level);
                    break;
                case 208:
                    //获取到玩家2的信息
                    var pid = msgObj.pid;
                    var header = msgObj.header;
                    var nickname = msgObj.nickname;
                    var level = msgObj.level;

                    $("img[class='right_info']").attr("src", "fileServlet?method=showImg&imgName=" + header);
                    $("#other_nickname").html(nickname);
                    $("#other_level").html(level);

                    $(".right_info").show();
                    $(".right_wait_info").hide();
                    break;
                case 209:
                    //{type:209, points:[{x:0,y:0,color:1},{x:3,y:8,}]}
                    var points = msgObj.points;
                    //循环数组
                    for(var i = 0; i < points.length; i++){
                        var p = points[i];
                        //将当前点绘制到棋局上
                        drawGo(p.x, p.y, p.color);
                    }
                    break;
                case 210:
                    //获取坐标点信息
                    var x = msgObj.x;
                    var y = msgObj.y;
                    var acolor = msgObj.color;
                    var isWin = msgObj.isWin;

                    //绘制图形
                    drawGo(x, y, acolor);

                    if (isWin) {
                        //已经产生了胜利者
                        showInfoDiv("[系统]:" + isWin + "获得胜利！");
                    }
                    break;
                case 211:
                    isbegin = false;
                    showInfoDiv("[系统]:对方已经恐惧的逃跑了，你已经获得了胜利！");
                    break;
                case 212:
                    //音频消息
                    var audioName = msgObj.audioName;
                    //给audio标签设置音频来源
                    $("#audio").attr("src", "fileServlet?method=showAudio&audioName=" + audioName);
                    //在本地显示当前的音频信息
                    showInfoDiv("[对方]:<button onclick='startPlayer();'>点击播放</button>");
                    break;
            }
        }

        //发送WebSocket消息
        function sendWsMsg(obj){
            //对象转成json字符串
            var json = JSON.stringify(obj);
            //发送字符串
            ws.send(json);
        }

        //展示信息到聊天框
        function showInfoDiv(msg){
            var msgStr = "<div>" + msg + "</div>";
            $(".im_info").append(msgStr);
        }

        //设置落子的玩家
        function showStepFlag(flag){
            isMe = flag;
            if(flag){
                //左边显示，右边隐藏
                $("#left_flag").show();
                $("#right_flag").hide();
            } else {
                //右边显示，左边隐藏
                $("#left_flag").hide();
                $("#right_flag").show();
            }
        }


        //------------------------绘制棋盘
        //drawGo(x,y,0); 绘制棋子的方法，0-黑子 1-白子
        //resetDrawGo(); 自动回撤上一步的落子
        function initGobang(){
            //id - 棋盘绘制的div的id值
            new GoBang({
                id: "borad_div",
                click: go
            });
        }

        //开始落子的方法
        function go(x, y){
            if(isbegin && isMe){
                //将该坐标发送给服务器
                var msg = {
                    type: 101,
                    rid: ${param.rid},
                    x: x,
                    y: y,
                    color: color
                };
                //发送消息
                sendWsMsg(msg);
            }
        }

        //-------------------初始化音频信息--------------
        function initAudio(){
            //初始化音频信息
            new InitAudio({
                url: "fileServlet?method=uploadAudio",
                enableUpload: true,
                uploadSucc: function(data){
                    var audioName = data.audioName;
                    console.log("上传的音频名称：" + audioName);

                    //给audio标签设置音频来源
                    $("#audio").attr("src", "fileServlet?method=showAudio&audioName=" + audioName);
                    //在本地显示当前的音频信息
                    showInfoDiv("[我]:<button onclick='startPlayer();'>点击播放</button>");

                    //发送给服务器
                    var msg = {
                        type: 102,
                        rid: ${param.rid},
                        audioName: audioName
                    };
                    sendWsMsg(msg);
                }
            });
        }

        function beginSpeak(){
            console.log("---->开始说话");
            showInfoDiv("[系统]:正在说话....");
            startRecoder();
        }

        function endSpeak(){
            console.log("---->结束说话");
            showInfoDiv("[系统]:结束说话....");
            stopRecoder();
        }

        //开始播放
        function startPlayer(){
            $("#audio")[0].play();
        }
    </script>
</head>
<body>
    <div class="left_div">
        <img id="left_img" src="fileServlet?method=showImg&imgName=${login_user.header}" style="width: 150px; height: 150px;"/>
        <span id="left_nickname">${login_user.nickname}</span>
        <span>等级：<a id="left_level">${login_user.level}</a></span>
        <span id="left_flag" style="display: none">我方落子</span>
    </div>

    <div class="middle_div">
        <!-- 顶部div -->
        <div class="title_div">
            <span>房间号：<a id="rid">xx</a>号</span>
            <span><a id="title">标题</a></span>
            <span>观战人数：<a id="looks">0</a></span>
        </div>
        <!-- 游戏div -->
        <div class="game_div">
            <div id="borad_div" class="borad_div"></div>
        </div>
        <!-- 聊天div -->
        <div class="im_div">
            <div class="im_info"></div>
            <div class="im_btn">
                <input/>
                <button>发送</button>
                <button onmousedown="beginSpeak();" onmouseup="endSpeak();">按住说话</button>
            </div>
        </div>
    </div>

    <div class="right_div">
        <img src="img/default_header.jpg" class="right_info" style="width: 150px; height: 150px;"/>
        <span id="other_nickname" class="right_info">昵称</span>
        <span id="other_level" class="right_info">等级</span>
        <span id="right_flag" style="display: none">我方落子</span>
        <span class="right_wait_info">等待对方加入....</span>
    </div>

    <!-- 音频播放 -->
    <audio id="audio"></audio>
</body>
</html>
